<template>
	<view class="ditu">
		<map id="map" style="width:100%;height:100%;" :latitude="latitude" :longitude="longitude" :show-location="true"
			:show-compass="true" :enable-3D="true" :enable-overlooking="true" :scale="scale" :markers="markers"
			@markertap="toMap()"  :dragging="canDrag"   >
		</map>
	</view>
</template>

<script>
	import QQMapWX from "../../utils/qqmap-wx-jssdk.min.js";
	export default {
		data() {
			return {
				latitude: 28.20279, //纬度  
				longitude: 113.03539, //经度  
				map: {},
				scale: 14, //地图缩放程度  
				markers: [{ // Markers array  
					id: 1,
					latitude: 28.20279, // marker latitude  
					longitude: 113.03542, // marker longitude  
					iconPath: '../../static/icon/local.png', // Custom icon path  
					width: 50, // icon width  
					height: 60 // icon height  
				}, { // Markers array  
					id: 2,
					latitude: 28.20279, // marker latitude  
					longitude: 113.03342, // marker longitude  
					iconPath: '../../static/icon/local.png', // Custom icon path  
					width: 50, // icon width  
					height: 60 // icon height  
				}, { // Markers array  
					id: 3,
					latitude: 28.20279, // marker latitude  
					longitude: 113.03642, // marker longitude  
					iconPath: '../../static/icon/local.png', // Custom icon path  
					width: 50, // icon width  
					height: 60 // icon height  
				}]
			}
		},
		 props: {  
		    canDrag: {  
		      type: Boolean,  	
		      default: true  
		    }  
		  },  
		onReady() {
			// 得到map对象,注意：引号里的map指向<map>组件的id，如果<map>组件没有加上id，就操作不了<map>组件
			this.map = uni.createMapContext("map", this);
		},
		methods: {
			controltap() { // 地图控件点击
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude;
						this.latitude = res.latitude;
					}
				});
				this.map.moveToLocation()

			},
			getLocation() {
				const _this = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.getLocation({
							type: 'wgs84',
							geocode: true,
							success: function(res) {
								let param = {
									id: 4,
									latitude: res.latitude,
									longitude: res.longitude,
									iconPath: '../../static/icon/mylocalhost.png',
									width: 50,
									height: 60
								}
								_this.markers.push(param)
								console.log(res);
								_this.latitude = res.latitude
								uni.setStorageSync("latitude", res.latitude)
								uni.setStorageSync("longitude", res.longitude)
								_this.longitude = res.longitude
								let location = {
									longitude: res.longitude,
									latitude: res.latitude,
									province: "",
									city: "",
									area: "",
									street: "",
									address: "",
								};

								const qqmapsdk = new QQMapWX({
									key: '72YBZ-OCRLM-OT66C-6LNFO-THKW6-RSF5X'
								});

								qqmapsdk.reverseGeocoder({
									location,
									success: function(res) {
										let info = res.result;
										location.province = info.address_component
											.province;
										location.city = info.address_component.city;
										location.area = info.address_component.district;
										location.street = info.address_component.street;
										location.address = info.address;
										console.log(location);
									},
								});
							},
							fail: function(err) {
								console.error('获取定位失败:', err);
								uni.showToast({
									title: '获取定位失败',
									icon: 'none'
								});
							}
						});
					},
					fail: function() {
						console.log('用户未授权定位');
					}
				});
			},
			toMap(e) {
				console.log('Marker tapped:', e.markerId);
				// Additional marker tap handling can be added here.  
			}
		},
		mounted() {
			this.getLocation(); //获取当前定位  
		},
	}
</script>

<style scoped lang="scss">  
	.ditu {  
		width: 100vw;  
		height: 100vh;  
		position: relative; /* 使绝对定位生效 */  
	}  

	.location-container {  
		position: absolute; /* 绝对定位使得可以在地图组件上定位 */  
		top: 550px; /* 根据需要调整底部 */  
		right: 10px; /* 根据需要调整右侧 */  
		display: flex; /* 使用 Flexbox */  
		justify-content: flex-end; /* 水平排列方式 */  
		align-items: flex-end; /* 垂直排列方式 */  
		z-index: 10; /* 确保在其他元素上面显示 */  
	}  

	.my-location {  
		display: flex; /* Flexbox 属性 */  
		justify-content: center; /* 确保内部内容居中 */  
		align-items: center; /* 确保内部内容垂直居中 */  
	}  
</style>